<template>
  <div>
    <!-- 头部 -->
    <van-popup v-model="show" position="left" :style="{ height: '100%', width: '70%' }">
      <leftLogint></leftLogint>
    </van-popup>
    <div class="header">
      <!-- <div class="left iconfont icon-yonghu" @click="show = !show"></div> -->
      <div class="left iconfont icon-yonghu" @click.stop="$router.push('/login')"></div>
      <div class=" center">
        <van-search v-model="value" background="#fff" shape="round" placeholder="请输入搜索关键词" class="seach"
          @focus="onFocus" />
      </div>
      <div class="right">
        <i class="iconfont icon-maikefeng"></i>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <div class="imgs">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in bannerData" :key="index">
            <img v-lazy="item.pic" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 切换兰 -->
    <div class="tabNav">
      <ul>
        <li>
          <div class="tabItem" @click.stop="$router.push('/dailyracm')">
            <div class="tabIcon">
              <i class="iconfont icon-meirituijian1"></i>
            </div>
            <span>每日推荐</span>
            <span class="date">{{ date }}</span>
          </div>
        </li>
        <li>
          <div class="tabItem" @click.stop="$router.push('/songlist')">
            <div class="tabIcon">
              <i class="iconfont icon-gedan"></i>
            </div>
            <span>歌单</span>
          </div>
        </li>
        <li>
          <div class="tabItem" @click="$router.push('/rankinglist')">
            <div class="tabIcon">
              <i class="iconfont icon-paixingbang"></i>
            </div>
            <span>排行榜</span>
          </div>
        </li>
        <li>
          <div class="tabItem" @click="$router.push('/singer')">
            <div class="tabIcon">
              <i class="iconfont icon-geshou"></i>
            </div>
            <span>歌手</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="mian">
      <!-- 推荐歌单 -->
      <div class="recomList">
        <div class="recomListTop">
          <h3 class="title">推荐歌单</h3>
          <div class="moreAndMore"  @click.stop="$router.push('/songlist')">
            <span>更多</span>
            <i class="iconfont icon-xiayiyehouyiye"></i>
          </div>
        </div>
        <div class="content">
          <van-swipe :loop="false" :width="130" :show-indicators="false" class="my-swpie">
            <van-swipe-item v-for="(item, index) in recommendSongListData" :key="index" @click="songItem(item.id)">
              <div>
                <div class="img">
                  <img :src="item.picUrl" alt="" />
                </div>
                <div class="shul" v>
                  <i class="iconfont icon-bofang"></i><span>{{ item.playCount | formatNum }}</span>
                </div>
                <p>{{ item.name }}</p>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <!-- 排行榜 -->
      <div class="songList">
        <div class="songTop">
          <h4 class="title">排行榜</h4>
          <div class="moreAndMore" @click="$router.push('/rankinglist')">
            <span>更多</span>
            <i class="iconfont icon-xiayiyehouyiye"></i>
          </div>
        </div>
        <van-swipe :loop="false" :width="330" :show-indicators="false">
          <van-swipe-item v-for="(ranklist, index) in ranklist" :key="index" @click="listdetails(ranklist.id)">
            <div class="TheList">
              <div class="listName">
                <h2>{{ ranklist.name }}</h2>
                <span v-show="index == 0">潜力爆款预定</span>
                <span v-show="index == 1">云村用户都在听</span>
                <span v-show="index == 2">超3亿次播放</span>
                <span v-show="index == 3">百万用户收藏</span>
              </div>
              <ul>
                <li v-for="(tracks, index) in ranklist.tracks.slice(0, 3)" :key="tracks.id">
                  <div class="img">
                    <img :src="tracks.al.picUrl" alt="" />
                  </div>
                  <h4 class="serial">{{ index + 1 }}</h4>
                  <div class="gmxm">
                    <span>{{ tracks.name }}</span>
                    <p>{{ tracks.ar[0].name }}</p>
                  </div>
                </li>
              </ul>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBanner,
  getRecommendedSong,
  getTopList,
  getPlayListDetail,
} from "@/api/home";
import leftLogint from "@/components/Logindom/ProfileLogin.vue";
export default {
  components: {
    leftLogint,
  },
  data() {
    return {
      show: false,
      value: "",
      bannerData: [], //轮播图
      recommendSongListData: [], //推荐歌单
      ranklist: [], //首页排行榜
      date: 0,
    };
  },

  //播放量转换单位
  filters: {
    formatNum(value) {
      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },

  methods: {
    // 获取轮播图数据
    getBannerData() {
      getBanner().then((req) => {
        this.bannerData = req.banners;
      });
    },
    //获取推荐歌单数据
    getrecommendSongListData() {
      getRecommendedSong().then((req) => {
        this.recommendSongListData = req.result.slice(0, 6);
      });
    },
    // 获取排行榜数据
    getTopListFun() {
      getTopList().then((data) => {
        this.getaccessListContent(data.list.slice(0, 4));
      });
    },
    getaccessListContent(list) {
      //请求第二个接口
      let item = [];
      for (let i = 0; i < list.length; i++) {
        let id = list[i].id;
        getPlayListDetail({ id }).then((data) => {
          item.push(data.playlist);
          //  console.log(item);
          this.ranklist = Array.from(new Set(item));
          // this.ranklist=new set(this.ranklist)
          // console.log( this.ranklist);
        });
      }
    },
    // 获取日期
    getdate() {
      this.date = new Date().getDate();
    },
    //获取焦点跳转搜索页
    onFocus() {
      this.$router.push("/search");
    },
    // 跳转歌单详情页
    songItem(id) {
      this.$router.push({
        path: "/songlistdetails",
        query: {
          id,
        },
      });
    },
    //跳转排行榜详情
    listdetails(id) {
      this.$router.push({
        path: "/listdetails",
        query: {
          id: id,
        },
      });
    },
  },
  created() {
    this.getdate();
    this.getBannerData();
    this.getrecommendSongListData();
    this.getTopListFun();
  },
};
</script>

<style lang="scss" scoped>



// 头部样式
.header {
  height: 40px;
  display: flex;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: #fff;
  color: #000;
  text-align: center;
  align-items: center;
  .icon-maikefeng{ 
    font-size: 20px;
  }
  .left,
  .right {
    flex: 0 0 40px;
    line-height: 40px;
    font-size: 28px;
  }
  .icon-yonghu {
    font-size: 20px;
    // font-weight: bold;
    
  }
  .center {
    flex: 1;
    margin-top: 2.5px;
    padding: 0;
    line-height: 40px;
    .seach {
      padding: 0;
    }
  }
}
// 轮播图样式
.banner {
  height: 134px;
  background-color: #fff;
  width: 100%;
  position: relative;

  margin-top: 50px;
  .imgs {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    min-height: 140px;
    width: 94%;
    border-radius: 4px;
    overflow: hidden;

    img {
      // width: 6.8rem;
      width: 100%;
      height: 120px;
    }
  }
}
// 切换兰样式

.tabNav {
  //  height: 1rem;
  //  border: 0.01rem solid #000;

  ul {
    display: flex;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;

    li {
      text-align: center;
      flex: 1;
    }
    .tabItem {
      display: flex;
      position: relative;
      align-items: center;
      flex-direction: column;
      .tabIcon {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: rgb(249, 225, 229);
        line-height: 45px;
        margin-bottom: 10px;
        i {
          width: 100%;
          font-size: 26px;
          color: #ff3300;
        }
      }

      span {
        color: rgb(155, 151, 151);
      }
      .date {
        position: absolute;
        top: 20px;
        color: #fff;
        font-size: 12px;
      }
    }
  }
}

.mian {
  background-color: #f5f5f5;
  // 推荐歌单样式
  .recomList {
    padding: 20px 10px 10px 10px;
    background-color: #ffff;
    .recomListTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
      text-align: center;

      .title {
        font-size: 16px;
        font-weight: bold;
        text-indent: 3px;
      }

      .moreAndMore {
        flex: right;
        height: 20px;
        font-size: 12px;
        border-radius: 37.5%/100%;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;

        span {
          padding-left: 10px;
        }
        i {
          margin-left: -3px;
          font-size: 16px;
          padding-right: 4px;
        }
      }
    }

    .content {
      .my-swpie {
        height: 100%;
      }

      .img {
        border-radius: 4px;
        margin: 0 5px;

        img {
          width: 100%;
          border-radius: 10px;
        }
      }
      .shul {
        position: absolute;
        top: 0px;
        right: 0px;
        color: #fff;
        font-size: 10px;
        height: 20px;
        line-height: 20px;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        margin-right: 10px;
        margin-top: 5px;
        border-radius: 37.5%/100%;
        padding: 0 5px;
        span {
        }
        i {
          display: inline-block;
          transform: scale(0.9);
          vertical-align: middle;
          margin-top: -2px;
        }
      }

      p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 6px 2px 0 6px;
        min-height: 30px;
        line-height: 1.2;
        font-size: 13px;
      }
    }
  }
  // 排行榜样式
  .songList {
    width: 100%;
    margin-top: 10px;
    background-color: #ffff;
    padding-bottom: 100px;
    .songTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      text-align: center;
      .title {
        font-weight: bold;
      }
      .moreAndMore {
        flex: right;
        height: 20px;
        font-size: 12px;
        border-radius: 37.5%/100%;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        span {
          padding-left: 10px;
        }

        i {
          margin-left: -3px;
          font-size: 16px;
          padding-right: 4px;
        }
      }
    }
    .TheList {
      margin: 0 16px;
      border-radius: 4px;
      margin-bottom: 10px;
      border: 1px solid #cccc;
      .listName {
        display: flex;
        justify-content: space-between;
        margin: 10px;

        h2 {
          font-weight: bold;
        }
        span {
          font-size: 10px;

          color: rgb(146, 143, 143);
        }
      }

      ul {
        li {
          display: flex;
          margin: 10px;
          align-items: center;
          .img {
            width: 50px;
            height: 50px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
            }
          }
          .serial {
            font-weight: bold;
            margin: 0 10px;
          }

          .gmxm {
            span {
              // font-weight: bold;
              // color: #434a5a;
              font-family: "黑体";
            }

            p {
              font-size: 12px;
              color: #aaacb4;
            }
          }
        }
      }
    }
  }
}
</style>